<template>
    <view class="multi-selector">
        <view
            :class="[classes, { disabled: disabled }]"
            :style="[styles]"
            @click="!disabled && (show = true)"
        >
            <slot></slot>
        </view>
        <uxt-modal
            max-width="90%"
            max-height="70%"
            min-width="70%"
            v-model="show"
            :color="color"
            :bg-color="bgColor"
            :position="position"
            @open="sure = false"
            @close="!sure && $emit('cancel', { detail: { value: value1 } })"
            @opened="$emit('opened', { detail: { value: value1 } })"
            @closed="$emit('closed', { detail: { value: value1 } })"
        >
            <template slot="title">
                <view class="flex justify-between">
                    <view @click="show = false">取消</view>
                    <view v-if="clearable" @click="handleClear">清空</view>
                    <view @click="handleSure">确定</view>
                </view>
            </template>
            <uxt-checkbox-group
                v-model="value11"
                item-width="100%"
                type="onlyicon"
                label-position="left"
            >
                <uxt-checkbox
                    :classes="`padding-sm${index === options.length - 1 ? '' : ' solid-bottom'}`"
                    v-for="(item, index) in options"
                    :key="index"
                    color="theme"
                    :label="isArrObj ? item[labelField] : item"
                    :value="index"
                ></uxt-checkbox>
            </uxt-checkbox-group>
        </uxt-modal>
    </view>
</template>

<script>
import baseMixin from '../mixins/base.js'
import formMixin from '../mixins/form.js'
import uxtModal from './uxt-modal.vue'
import uxtCheckboxGroup from './uxt-checkbox-group.vue'
import uxtCheckbox from './uxt-checkbox.vue'

export default {
    name: 'uxt-multi-selector',
    mixins: [baseMixin, formMixin],
    components: {
        uxtModal,
        uxtCheckboxGroup,
        uxtCheckbox
    },
    props: {
        // 弹出位置 bottom/center
        position: {
            type: String,
            default: 'bottom',
            validator(value) {
                return ['bottom', 'center'].includes(value)
            }
        },
        // Array<String> | Array<Object>
        options: {
            type: Array,
            default() {
                return []
            }
        },
        // options为Array<Object>，指定label字段
        labelField: {
            type: String,
            default: 'label'
        },
        value: {
            type: Array,
            default() {
                return []
            }
        },
        clearable: {
            type: Boolean,
            default: false
        },
        bgColor: {
            default: 'white'
        }
    },
    data() {
        return {
            show: false,
            value11: this.getValue(),
            sure: false
        }
    },
    computed: {
        isArrObj() {
            return typeof this.options[0] === 'object'
        }
    },
    watch: {
        show(newVal, oldVal) {
            if (newVal) {
                this.value11 = this.getValue()
            }
        }
    },
    methods: {
        getValue() {
            return this.value.filter(
                item => Number.isInteger(item) && item >= 0 && item < this.options.length
            )
        },
        handleSure() {
            this.show = false
            this.sure = true
            this.value11 = this.value11.sort()
            if (
                this.value11.toString() ===
                this.getValue()
                    .sort()
                    .toString()
            ) {
                return
            }
            this.value1 = this.value11
            this.$emit('change', { detail: { value: this.value1 } })
            this.$emit('input', this.value1)
        },
        handleClear() {
            this.show = false
            this.sure = true
            if (this.value1.length === 0) {
                this.$emit('clear', { detail: { value: this.value1 } })
                return
            }
            this.value1 = []
            this.$emit('clear', { detail: { value: this.value1 } })
            this.$emit('change', { detail: { value: this.value1 } })
            this.$emit('input', this.value1)
        },
        reset(value) {
            if (this.value1.sort().toString() !== value.sort().toString()) {
                this.value1 = value.sort()
                this.$emit('change', { detail: { value: this.value1 } })
                this.$emit('input', this.value1)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.multi-selector {
    position: relative;
}
</style>
